<template>
    <h3>readonly：只读的，变量内部值都无法修改。shallowReadonly：浅只读，变量最外层无法修改，深层可修改</h3>
    <h3>两者都是只读，没有响应式</h3>
    <h3>两者的get：readonly需要对get拦截返回的值再次readonly(res)包装，防止收集依赖。而shallowReadonly只需直接返回不包装，深层值依然可以修改</h3>
    <span>{{ foo }}</span>
    <el-button @click="handleClick1">readonly+</el-button>
    <div>=============</div>
    <span>{{ bar }}</span>
    <el-button @click="handleClick2">shallowReadonly+</el-button>
</template>

<script setup>
import { readonly, shallowReadonly } from "vue"

const foo = readonly({
    counter: {
        c: 1
    }
})
const bar = shallowReadonly({
    counter: {
        c: 1
    }
})

const handleClick1 = () => {
    foo.counter.c += 1
    console.log(foo);
}
const handleClick2 = () => {
    bar.counter.c += 1
    console.log(bar);
}
</script>

<style lang="scss" scoped>
</style>